<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/main/' }" class="a">本科生房源</el-breadcrumb-item>
        </el-breadcrumb>
        <el-container>
            <el-header>
                <el-row style="margin-top: 16px">
                    <el-select v-model="query0.yqStudent" clearable placeholder="请选择园区">
                        <el-option
                            v-for="item in yqData"
                            :key="item.idYq"
                            :label="item.nameYq"
                            :value="item.idYq">
                        </el-option>
                    </el-select>
                    <el-select v-model="query0.buildingsStudent" clearable placeholder="请选择楼栋" @input="getFloorNumber">
                        <el-option
                            v-for="item in filteredBuilding"
                            :key="item.idBuildings"
                            :label="item.nameBuildings"
                            :value="item.idBuildings">
                        </el-option>
                    </el-select>
                    <el-select v-model="query0.roomsStudent" clearable placeholder="请选择楼层">
                        <el-option
                            v-for="count in floorNumber"
                            :key="count"
                            :label="count"
                            :value="count">
                        </el-option>
                    </el-select>
                    <el-button  @click="getBksList" round style="width: 90px;border-radius: 5px;background: #275ce6;"><div class="txtx">查询</div></el-button>
                    <el-button @click="resetForm" class="btbt"><div class="txtx2"></div>重置</el-button>
                </el-row>
            </el-header>
            <el-main class="std" >
                <el-table
                    :data="users"
                    style="width: 100%"
                    stripe>
                    <el-table-column
                        prop="yqStudent"
                        label="园区"
                        width:272px>
                        <template slot-scope="scope">
                            {{formatYq(scope.row.yqStudent)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="buildingsStudent"
                        label="楼栋"
                        width:272px>
                        <template slot-scope="scope">
                            {{formatBuildings(scope.row.buildingsStudent)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="roomsStudent"
                        label="楼层"
                        width:216>
                        <template slot-scope="scope">
                            {{formatFloor(scope.row.roomsStudent)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="roomsStudent"
                        label="房间编号"
                        width:228px>
                    </el-table-column>
                    <el-table-column
                        prop="bedStudent"
                        label="床位编号"
                        width:187px>
                    </el-table-column>
                    <el-table-column
                        prop="price"
                        label="房间价格"
                        width:185px>
                        {{price}}
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="操作"
                        width:272px>
                        <template slot-scope="scope">
                            <el-button @click="bedRelease(scope.row)" type="text" size="small" style="color: red">释放床位</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer class="std2" >
                <el-pagination
                    class="btm_choseBox"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="query0.pageNo"
                    :page-sizes="[10,20,50,100]"
                    :page-size="query0.pagesize"
                    layout="total, sizes, prev, pager, next"
                    :total="total">
                </el-pagination>
            </el-footer>
        </el-container>
        <el-dialog
            title="释放床位"
            :visible.sync="dialogVisible"
            width="35%">
            <el-row>
                <el-col :span="24"><div class="text4BA">确认床位及对应人员信息</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="grid-content bg-purple"><div class="text4BA">园区</div></div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple"><div class="text4BA">楼栋</div></div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple"><div class="text4BA">房间编号</div></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple"><div class="text4BA">床位id</div></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple"><div class="text4BA">学号/工号</div></div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple"><div class="text4BA">姓名</div></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple"><div class="text4BA">专业</div></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="grid-content bg-purple-light"><div class="text4BA">{{formatYq(bedChosen.yqStudent)}}</div></div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple-light"><div class="text4BA">{{formatBuildings(bedChosen.buildingsStudent)}}</div></div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple-light"><div class="text4BA">{{formatFloor(bedChosen.roomsStudent)}}</div></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light"><div class="text4BA">{{bedChosen.bedStudent}}</div></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light"><div class="text4BA">{{bedChosen.idStudent}}</div></div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple-light"><div class="text4BA">{{bedChosen.nameStudent}}</div></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light"><div class="text4BA">{{bedChosen.majorStudent}}</div></div></el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-white"></div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-white"><div class="text4BA"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 点击确认以释放床位</div></div>
                </el-col>
            </el-row>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {bksList} from '../../../../api/benYan'
import {bedAllocation, buildingList, yqList} from '../../../../api/user'

export default {
  name: 'second',
  components: {},
  data () {
    return {
      currentPage: '1',
      pagesize: '100',
      price: 1000,
      total: 0,
      users: [],

      query0: {
        yqStudent: '',
        buildingsStudent: '',
        roomsStudent: '',
        bedStudent: '',
        hasbedStudent: '',
        pageNo: 1,
        pagesize: 10
      },
      query2: {
        idYq: '',
        nameYq: ''
      },
      query3: {
        idBuildings: '',
        yqBuildings: '',
        nameBuildings: '',
        floorsBuildings: ''
      },
      yqData: [],
      buildingData: [],
      roomData: [],
      floorNumber: 1,
      dialogVisible: false,
      bedChosen: {}
    }
  },
  methods: {
    bedRelease (row) {
      this.bedChosen = JSON.parse(JSON.stringify(row))
      console.info(this.bedChosen)
      this.dialogVisible = true
    },
    submit () {
      this.bedChosen.hasbedStudent = 0
      this.bedChosen.yqStudent = 1
      this.bedChosen.buildingsStudent = 0
      this.bedChosen.roomsStudent = 0
      this.bedChosen.bedStudent = 0
      bedAllocation(this.bedChosen).then(res => {
        if (res.data) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.getBksList()
          this.dialogVisible = false
        } else {
          this.$message({
            type: 'warning',
            message: '未知原因，释放床位失败，请联系管理员'
          })
        }
      })
    },
    resetForm () {
      // 重置功能
      this.query0.yqStudent = ''
      this.query0.buildingsStudent = ''
      this.query0.roomsStudent = ''
    },
    formatYq (yqStudent) {
      let n0 = ''
      for (var i = 0; i < this.yqData.length; i++) {
        if (this.yqData[i].idYq === yqStudent) { n0 = this.yqData[i].nameYq; break }
      }
      return n0
    },
    formatFloor (roomsStudent) {
      var floor = roomsStudent / 100
      floor = parseInt(floor)
      return floor + 'F'
    },
    formatBuildings (buildingsStudent) {
      let n0 = ''
      for (var i = 0; i < this.buildingData.length; i++) {
        if (this.buildingData[i].idBuildings === buildingsStudent) { n0 = this.buildingData[i].nameBuildings; break }
      }
      return n0
    },
    getBuildingList () {
      buildingList(this.query3).then(res => {
        this.buildingData = res.data.records
      })
    },
    getYqList () {
      yqList(this.query2).then(res => {
        this.yqData = res.data.records
      })
    },
    getFloorNumber () {
      let n0 = this.query0.buildingsStudent
      for (var i = 0; i < this.buildingData.length; i++) {
        if (this.buildingData[i].idBuildings === n0) { this.floorNumber = this.buildingData[i].floorsBuildings }
      }
    },
    getBksList () {
      bksList(this.query0).then(res => {
        this.users = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange (size) {
      this.query0.pagesize = size
      this.getBksList()
    },
    handleCurrentChange (currentPage) {
      this.query0.pageNo = currentPage
      this.getBksList()
    }
  },
  computed: {
    filteredBuilding () {
      return this.buildingData.filter(item => item.yqBuildings === this.query0.yqStudent)
    }
  },
  created () {
    this.getBksList()
    this.getYqList()
    this.getBuildingList()
  }
}
</script>
<style lang="less" scoped>
@import "../../../../assets/styles/pages";
.el-container{
  margin-top: 16px;
  background: #FFFFFF;
}
.btbt{
  width: 90px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #275ce6;
}
.txtx{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.19px;
  text-align: left;
  color: #fff;
}
.txtx2{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.19px;
  text-align: left;
  color: #275ce6;
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: #d3dce6;
}
.bg-purple-light {
    background: #e5e9f2;
}
.bg-white{
    background: #FFFFFF;
}
.grid-content {
    //border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
.text4BA{
    text-align: center;
    padding: 10px ;
}
</style>
